<template>
  <a-form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
    <a-form-item label="节点名称" required>
      <a-input v-model:value="formData.name" />
    </a-form-item>
    <a-form-item label="节点ID" required>
      <a-input v-model:value="formData.id" />
    </a-form-item>
  </a-form>
</template>

<script>
import { computed, onMounted, ref, watch } from 'vue'
import { useBpmnModeler, useBpmnSelectedElem } from '/@/config/app.hooks'

export default {
  name: 'BasicSetting',
  setup() {
    const bpmnModeler = useBpmnModeler()
    const bpmnSelectedElem = useBpmnSelectedElem()

    const formData = ref({
      name: '',
      id: ''
    })

    const updateFormData = () => {
      const selectedElem = bpmnSelectedElem.value
      if (!selectedElem) {
        return
      }
      const bo = selectedElem.businessObject
      formData.value = {
        name: bo.name || '',
        id: bo.id || ''
      }
    }

    watch(() => bpmnSelectedElem.value, () => {
      updateFormData()
    }, { immediate: true })

    watch(() => formData.value.name, (val) => {
      const selectedElem = bpmnSelectedElem.value
      if (!selectedElem) {
        return
      }
      const modeling = bpmnModeler.value.get('modeling')
      modeling.updateLabel(selectedElem, val)
    })

    watch(() => formData.value.id, (val) => {
      const selectedElem = bpmnSelectedElem.value
      if (!selectedElem) {
        return
      }
      const modeling = bpmnModeler.value.get('modeling')
      modeling.updateProperties(selectedElem, {
        id: val
      })
    })

    return {
      formData
    }
  }
}
</script>

<style scoped>
:deep(.ant-form-item) {
  margin-bottom: 12px;
}
</style>